<template>
	<div class="col-sm-12 col-md-8">
		<div class="card">
			<div class="card-header">添加Pizza</div>
			<div class="card-body">
				<form @submit.prevent='onSubmit'>
					<div class="form-group">
						<label for="">品种：
							<small class="text-danger" 
								v-remind="pizzadata.name">
							</small>
						</label>
						<input type="text" class="form-control" v-model='pizzadata.name' v-verify="pizzadata.name">
					</div>
					<div class="form-group">
						<label for="">描述：
							<small class="text-danger" 
							v-remind="pizzadata.description">
						</small>
						</label>
						<textarea class="form-control" rows="5" v-model='pizzadata.description' v-verify='pizzadata.description'></textarea>
					</div>
					<h5>选项1：</h5>
					<div class="form-group">
						<label for="">尺寸：
							<small class="text-danger" 
							v-remind="pizzadata.size1">
						</small>
						</label>
						<input type="text" class="form-control" v-model='pizzadata.size1' v-verify="pizzadata.size1">
					</div>
					<div class="form-group">
						<label for="">价格：
							<small class="text-danger" 
							v-remind="pizzadata.price1">
						</small>
						</label>
						<input type="text" class="form-control" v-model='pizzadata.price1' v-verify="pizzadata.price1">
					</div>
					<h5>选项2：</h5>
					<div class="form-group">
						<label for="">尺寸：
							<small class="text-danger" 
							v-remind="pizzadata.size2">
						</small>
						</label>
						<input type="text" class="form-control" v-model='pizzadata.size2' v-verify="pizzadata.size2">
					</div>
					<div class="form-group">
						<label for="">价格：
							<small class="text-danger" 
							v-remind="pizzadata.price2">
						</small>
						</label>
						<input type="text" class="form-control" v-model='pizzadata.price2' v-verify="pizzadata.price2">
					</div>
					<div class="form-group mt-4">
						<button type="submit" class="btn btn-success btn-block">添加</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				pizzadata:{}
			}
		},
		created(){
			this.$http.get('https://d.apicloud.com/mcm/api/pizzaMenu').then((res) =>{
				console.log(res.data);
				this.$store.commit('setpizaadata',res.data);
			}).catch(err =>{console.log(err)})
		},
		verify:{
			name:'required',
			description:'required',
			size1:'required',
			price1:'required',
			size2:'required',
			price2:'required',
		},
		methods:{
			onSubmit(){
				let data = {
					name: this.pizzadata.name,
					description: this.pizzadata.description,
					options: [
					{
						size: this.pizzadata.size1,
						price: this.pizzadata.price1
					},
					{
						size: this.pizzadata.size2,
						price: this.pizzadata.price2
					}
					]
				};
				// console.log(data);
				this.$http.post('/api/pizzaMenu',data).then((res) =>{
					this.$store.commit('addPizza',res.data);
					this.pizzadata = {};
				})
			}
		}
	};
</script>